<template>
    <div class="list">
        <table border=1 cellSpacing=0>
            <thead>
                <th>商品序号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>删除</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in shopList" :key="index">
                    <td>{{index}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
export default {
  props: {
    shopList: Array
  },
  methods: {
    del(index){
      this.shopList.splice(index,1)
    }
  },
};
</script>
<style lang="scss" scoped>
th{
  width: 144.5px;
  height: 30px;
}
</style>


